<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>VisualizeHistory.com</title>
	<link rel="stylesheet" type="text/css" href="css/styles.css" />

	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/fonts/fonts-min.css" />
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/button/assets/skins/sam/button.css" />
	<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/element/element-beta-min.js"></script>

	<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/button/button-min.js"></script>
	
	<script>
	
	var t;
	
	function Map(){
		this.me = 'Me me me';
		this.toggleTopicVisibility = function(arg){
			console.log('Toggling topic visibility');
		};
	}
	
	function Topic(map){
		this.isDescVisible = true;
		this.map = map;
		this.title = "U.S. Presidents";

		this.ls = document.getElementById('ul');
		this.li = document.createElement('li');
		this.li.setAttribute('id', 'li');
		this.ls.appendChild(this.li);

		this.showHideEvents = new YAHOO.widget.Button({
				type: "checkbox", 
				label: " ", 
				id: "todo-id", 
				name: "todo-name", 
				value: true, 
				container: "li", 
				checked: true,		
		});
		this.showHideEvents.css = 'show-hide-events';
		console.log(this.showHideEvents);
		var showHideEventsCss = 'show-hide-events';
		this.showHideEvents.addClass(showHideEventsCss);
		this.showHideEvents.addClass(showHideEventsCss + '-checked');
		this.showHideEvents.addListener("checkedChange", 
				map.toggleTopicVisibility,
				this,
				this.map
				);	
		this.showHideEvents.addListener("checkedChange", 
			(function(event){
				if(event.newValue){
					this.showHideEvents.replaceClass(this.showHideEvents.css + '-unchecked', this.showHideEvents.css + '-checked');
				}else{
					this.showHideEvents.replaceClass(this.showHideEvents.css + '-checked', this.showHideEvents.css + '-unchecked');
				}
			}),
			this,
			this
			);	
		
		this.titleLink = document.createElement('a');
		this.titleLink.setAttribute('href', 'javascript:void(0);');
		
		var titleLinkSpan = document.createElement('span');
	
		this.plusNode = document.createElement('span');
		this.plusNode.appendChild(document.createTextNode('+'));

		this.minusNode = document.createElement('span');
		this.minusNode.appendChild(document.createTextNode('-'));
		this.minusNode.style.display = 'none';
		
		titleLinkSpan.appendChild(this.plusNode);
		titleLinkSpan.appendChild(this.minusNode);
		
		this.titleLink.appendChild(titleLinkSpan);
		this.titleLink.appendChild(document.createTextNode(this.title));
		
		YAHOO.util.Dom.addClass(this.titleLink, 'title-link');
		YAHOO.util.Event.addListener(this.titleLink, "click", 
					(function(arg){
						this.toggleDescVisibility();
					}),
					null,
					this
					);
		this.li.appendChild(this.titleLink);
		
		this.addButton = new YAHOO.widget.Button(
					{
					type: "checkbox", 
					label: "add", 
					title: "title",
					id: "cb5", 
					name: "todo: name", 
					container: "li", 
					}
				);
		YAHOO.util.Dom.addClass(this.addButton._button,'push-button');
		this.addButton.addClass('add');
		// todo: add onclick handler
		
		this.removeButton = new YAHOO.widget.Button(
					{
					type: "checkbox", 
					label: "remove", 
					title: "title",
					id: "cb6", 
					name: "todo: name", 
					container: "li", 
					}
				);
		YAHOO.util.Dom.addClass(this.removeButton._button,'push-button');
		this.removeButton.addClass('remove');
		this.removeButton._button.style.display = 'none';
		
	}
	
	Topic.prototype.toggleDescVisibility = function(event){
		//. todo: make this not use document.getElt( by id)
		
		var display;
		var showNode;
		var hideNode
		if(this.isDescVisible){
			display = "block";
			showNode = this.minusNode;
			hideNode = this.plusNode;
		}else{
			display = "none";
			showNode = this.plusNode;
			hideNode = this.minusNode;
		}
		document.getElementById("desc").style.display = display;
		//this.titleLink.set('label', pre + this.title);
		showNode.style.display = 'inline';
		hideNode.style.display = 'none';
		
		this.isDescVisible = !this.isDescVisible;
	}
	
	function load(){
		var m = new Map();
		t = new Topic(m);
	}
	
	</script>
</head>
<body class="sidebar-right" onload="load()">
  <div id="header">
	<h1>Visualize History <span class="dotcom">.com</span></h1>
  </div>
  <div id="content">
	<div id="viewing-panel">
		<div id="map"></div>
	</div>
	<div id="nav-panel">
		<h3>Popular Examples</h3>
		<ol id="ul">
			
		</ol>
		<p id="desc">The description</p>
	</div>
  </div>
  <div id="footer">
	<em>footer</em> | <em>footer</em> | <em>footer</em>
  </div>
  </body>
</html>
